<template>
  <h2>Vuex Api useStore</h2>
  <h3>num1:{{$store.state.num1}}</h3>
  <h3>getters:{{$store.getters.double}}</h3>
  <button @click="edit(33)">修改num1：{{$store.state.num1}}</button>
  <button @click="update">修改update：{{$store.state.num1}}</button>
  <hr>
  <h3>num2:{{$store.state.num2}}</h3>
  <h3>getters-num2:{{double2}}</h3>
  <button @click="edit2(99)">修改num2：{{$store.state.num2}}</button>
  <button @click="update2">修改update：{{$store.state.num2}}</button>
</template>

<script>
import {useStore} from 'vuex';
import {computed} from "vue";
export default {
  name: "VuexApi",
  setup(){
      const store = useStore();
      return{
        num2:computed(()=>store.state.num2),
        double2:computed(()=>store.getters.double2),
        edit2:(num)=>{
          store.commit('chanageNum2',num)
        },
        update2:()=>{
          store.dispatch('timeCnum2')
        }
      }
  },
  //原生vuex
  methods:{
    edit(num){
      this.$store.commit('chanageNum1',num)
    },
    update(){
      this.$store.dispatch('timeCnum1');
    }
  }
}
</script>

<style scoped>

</style>